<template>
	<div class="pl-[20px] pr-[20px]">
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">客户端</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="13" class="v-flex-col">
						<span class="main-color">登录图片：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn1}" v-model:file-list="clientlist"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="5"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="clientHandleRemove"
							:on-success="clientHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">Logo图：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn2}" v-model:file-list="client"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="1"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="clientLogoHandleRemove"
							:on-success="clientLogoHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">供应商端</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">登录图片：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn3}" v-model:file-list="supplierlist"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="5"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="supplierHandleRemove"
							:on-success="supplierHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">Logo图：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn4}" v-model:file-list="supplier"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="1"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="supplierLogoHandleRemove"
							:on-success="supplierLogoHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">货代端</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">登录图片：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn5}" v-model:file-list="agentlist"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="5"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="agentHandleRemove"
							:on-success="agentHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">Logo图：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn6}" v-model:file-list="agent"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="1"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="agentLogoHandleRemove"
							:on-success="agentLogoHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">平台端</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">登录图片：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn7}" v-model:file-list="adminlist"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="5"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="adminHandleRemove"
							:on-success="adminHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="13">
						<span class="main-color">Logo图：</span>
						<el-upload class="mt-[10px]" :class="{hide_box:upload_btn8}" v-model:file-list="admin"
							:action="apiUrl+'supplierapi/upload/image'" :headers="headers" :limit="1"
							list-type="picture-card" accept=".jpg,.png,.gif,.jpeg" :on-remove="adminLogoHandleRemove"
							:on-success="adminLogoHandleAvatarSuccess">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">邮件模板</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="6" class="flex-col">
						<span class="main-color mb-[10px]">工序节点邮箱：</span>
						<el-input  v-model="formData.email.node_email" :rows="3" type="textarea" placeholder="多行输入" />
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6" class="flex-col">
						<span class="main-color mb-[10px]">询价提醒：</span>
						<el-input v-model="formData.email.tips_email" :rows="3" type="textarea" placeholder="多行输入" />
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="bg-white mt-[20px]">
			<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff">开票信息</div>
			<div class="pl-[20px] pr-[20px] pb-[30px]">
				<el-row class="mt-[20px]">
					<el-col :span="21" class="flex-col">
						<span class="main-color mb-[10px]">开票提醒：</span>
						<editor v-model="formData.invoice" :height="667" />
					</el-col>
				</el-row>
			</div>
		</div>
		<el-row class="mt-[30px]">
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary" @click="clickSubmit">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import config from '@/config/index'
	import { getRoutePath } from '@/router'
	import type { UploadProps, UploadUserFile } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import { systemGet ,systemSet } from '@/api/basicSettings'
	import useUserStore from '@/stores/modules/user'
	import feedback from '@/utils/feedback'
	const formData = reactive({
		client: {//客户端
			login:[],
			logo:''
		},
		supplier: {//供应商端
			login:[],
			logo:''
		},
		agent: {//货代端
			login:[],
			logo:''
		},
		admin: {//货代端
			login:[],
			logo:''
		},
		email:{
			node_email:'',//工序节点邮箱
			tips_email:'',//询价提醒邮箱
		},
		invoice:'',//开票信息
	})
	const upload_btn1 = ref(false) //客户端login隐藏上传图片按钮
	const upload_btn2 = ref(false) //客户端logo隐藏上传图片按钮
	const upload_btn3 = ref(false) //供应商端login隐藏上传图片按钮
	const upload_btn4 = ref(false) //供应商logo隐藏上传图片按钮
	const upload_btn5 = ref(false) //货代端login隐藏上传图片按钮
	const upload_btn6 = ref(false) //货代端logo隐藏上传图片按钮
	const upload_btn7 = ref(false) //平台端login隐藏上传图片按钮
	const upload_btn8 = ref(false) //平台端logo隐藏上传图片按钮
	const imageUrl = ref('')//图片上传
	const apiUrl = config.baseUrl //域名
	const userStore = useUserStore()
	const headers = computed(() => ({//请求头
		token: userStore.token,
		version: config.version
	}))
	const clientlist = ref([]) //客户端login
	const client = ref([]) //客户端logo
	const supplierlist = ref([]) //供应商端login
	const supplier = ref([]) //供应商端logo
	const agentlist = ref([]) //货代端login
	const agent = ref([]) //货代端logo
	const adminlist = ref([]) //平台端login
	const admin = ref([]) //平台端logo
	// 客户端login图片上传成功
	const clientHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		clientlist.value[clientlist.value.length-1].url = response.data.uri
		console.log(clientlist,'onSuccess')
		if (clientlist.value.length >= 5) {
			upload_btn1.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	// 客户端login删除图片
	const clientHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		console.log(clientlist,'onRemove')
		upload_btn1.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 客户端logo图片上传成功
	const clientLogoHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		client.value[0].url = response.data.uri
		if (client.value.length >= 1) {
			upload_btn2.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	// 客户端logo删除图片
	const clientLogoHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn2.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 供应商端login图片上传成功
	const supplierHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		supplierlist.value[supplierlist.value.length-1].url = response.data.uri
		if (supplierlist.value.length >= 5) {
			upload_btn3.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	// 供应商端login删除图片
	const supplierHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn3.value = false //当图片上传少于5张之后显示上传按钮
	}
	//供应商端logo图片上传成功
	const supplierLogoHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		supplier.value[0].url = response.data.uri
		if (supplier.value.length >= 1) {
			upload_btn4.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	// 供应商端logo删除图片
	const supplierLogoHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn4.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 货代端login图片上传成功
	const agentHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		agentlist.value[agentlist.value.length-1].url = response.data.uri
		if (agentlist.value.length >= 5) {
			upload_btn5.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	//  货代端login删除图片
	const agentHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn4.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 货代端login图片上传成功
	const agentLogoHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		agent.value[0].url = response.data.uri
		if (agent.value.length >= 1) {
			upload_btn6.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	//  货代端logo删除图片
	const agentLogoHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn6.value = false //当图片上传少于5张之后显示上传按钮
	}
	//平台端login图片上传成功 
	const adminHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		adminlist.value[adminlist.value.length-1].url = response.data.uri
		if (adminlist.value.length >= 5) {
			upload_btn7.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	//  平台端login删除图片
	const adminHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn7.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 平台端login图片上传成功
	const adminLogoHandleAvatarSuccess : UploadProps['onSuccess'] = (response,uploadFile) => {
		admin.value[0].url = response.data.uri
		if (admin.value.length >= 1) {
			upload_btn8.value = true //当图片上传够5张之后隐藏上传按钮
		}
	}
	//  平台端logo删除图片
	const adminLogoHandleRemove : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
		upload_btn8.value = false //当图片上传少于5张之后显示上传按钮
	}
	// 获取配置
	const getSystem = async () => {
		await systemGet().then(res => {
			res.client_login.forEach(item => {
				clientlist.value.push({ url: item })
			})
			upload_btn1.value = clientlist.value.length >= 5 ? true : false ////当图片上传少于5张之后显示上传按钮
			client.value.push({ url: res.client_logo })
			upload_btn2.value =client.value.length >= 1 ?true : false
			res.supplier_login.forEach(item => {
				supplierlist.value.push({ url: item })
			})
			upload_btn3.value = supplierlist.value.length >= 5 ? true : false
			supplier.value.push({ url: res.supplier_logo })
			upload_btn4.value = supplier.value.length >= 1 ? true : false
			res.agent_login.forEach(item=>{
				agentlist.value.push({ url: item })
			})
			upload_btn5.value = agentlist.value.length >= 5 ? true : false
			agent.value.push({ url: res.agent_logo })
			upload_btn6.value = agent.value.length >= 1 ? true : false
			res.admin_login.forEach(item=>{
				adminlist.value.push({ url: item })
			})
			upload_btn7.value = adminlist.value.length >= 5 ? true : false
			admin.value.push({ url: res.admin_logo })
			upload_btn8.value = admin.value.length >= 1 ? true : false
			formData.invoice = res.invoice 
			formData.email.node_email = res.email_node_email
			formData.email.tips_email = res.email_tips_email
		})
	}

	getSystem()
	// 保存
	const clickSubmit = async ()=>{
		if(clientlist.value.length<1){
			return feedback.msgError('请上传客户端的登录图片')
		}else{
			clientlist.value.forEach(item=>{
				formData.client.login.push(item.url)
			})
		}
		if(client.value.length<1){
			return feedback.msgError('请上传客户端的Logo图片')
		}else{
			formData.client.logo = client.value[0].url
		}
		if(supplierlist.value.length<1){
			return feedback.msgError('请上传供应商端的登录图片')
		}else{
			supplierlist.value.forEach(item=>{
				formData.supplier.login.push(item.url)
			})
		}
		if(supplier.value.length<1){
			return feedback.msgError('请上传供应商端的Logo图片')
		}else{
			formData.supplier.logo = supplier.value[0].url
		}
		
		if(agentlist.value.length<1){
			return feedback.msgError('请上传货代端的登录图片')
		}else{
			agentlist.value.forEach(item=>{
				formData.agent.login.push(item.url)
			})
		}
		if(agent.value.length<1){
			return feedback.msgError('请上传货代端的Logo图片')
		}else{
			formData.agent.logo = agent.value[0].url
		}
		if(adminlist.value.length<1){
			return feedback.msgError('请上传平台端的登录图片')
		}else{
			adminlist.value.forEach(item=>{
				formData.admin.login.push(item.url)
			})
		}
		if(admin.value.length<1){
			return feedback.msgError('请上传平台端的Logo图片')
		}else{
			formData.admin.logo = admin.value[0].url
		}
		console.log(formData)
		await systemSet(formData).then(res=>{
			feedback.msgSuccess('操作成功')
		})
	}
</script>

<style scoped>
	.hide_box :deep() .el-upload--picture-card {
		display: none;
	}

	:deep() .el-upload-list__item-preview .el-icon {
		display: none;
	}

	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
		margin-top: 10px;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}
</style>